
/* 3. 样式配置： */
/* 核心原理：在 父盒子 上盖上 "遮罩层", 且 "遮罩层" 利用[线性渐变]效果... */
body {
  background-color: #333;
}

.container {
  box-sizing: border-box;
  width: 530px;
  height: 400px;
  position: relative;
  overflow: hidden;

  /* overflow: auto; */
}

.container {
 color: #fff;
}

.container .gradient {
  position: absolute;

  /* 4. 定位下, 利用 "inset属性", 直接替代定位四个方位的属性... */
  /* "inset属性" 设置为0, 即 "遮罩层" 以父盒子四角顶点 紧贴盖上... */
  inset: 0;

  background: linear-gradient(180deg, transparent 0, oklch(0.14 0 0) 100%);
}